<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Ajax登录界面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('#btnLogin').click(function () {
                // 1.获取用户名和密码
                var username = $('#username').val();
                var password = $('#password').val();
                // 2.发起post ajax请求，/login_ajax_check 并在data携带用户名和密码
                $.ajax({
                    'url': '/login_ajax_check',
                    'type': 'post',
                    'dataType': 'json',
                    'data': {'username': username, 'password': password},
                }).success(function (data) {
                    // 当res为1时表示登录成功，当res为0时表示登录失败
                    if (data.res == 0 ) {
                        $('#errmsg').show().html('输入的账户和密码错误，请重新输入并登录。');
                    }
                    else {
                        $('#errmsg').hide();
                        location.href = '/index';
                    }
                });
            });
        })
    </script>
    <style>
        #errmsg {
            display: none;
            color: orangered;
        }
    </style>
</head>
<body>
<div>
    用户名：<input type="text" id="username"><br/>
    &nbsp;&nbsp;&nbsp;密码：<input type="password" id="password"><br/>
    <input type="button" id="btnLogin" value="登录">
    <div id="errmsg"></div>
</div>
</body>
</html>